Address Lighthouse performance issues#63
Conversation
- Optimize hero image size (1024 -> 600px) - Add 'sizes' attribute to hero image for better LCP discovery - Update TS target to ES2022 and add .browserslistrc to reduce legacy polyfills - Mitigate forced reflows by caching window.innerWidth in useEffect
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
- Revert window.innerWidth refactoring in hero.tsx and section.tsx - Update .browserslistrc to include > 0.5% coverage requirement
- Optimize hero image size (600px, 38KB) - Add 'sizes' attribute to hero image for better LCP discovery - Update TS target to ES2022 to reduce legacy JS transpilation - Add .browserslistrc with '> 0.5%' and modern browser targets - Revert window.innerWidth refactoring as per PR feedback
|
1 participant
Addressed several Lighthouse issues identified in the audit:
amrabed.webpfrom 1024x1024 to 600x600 to better match its display dimensions while maintaining quality for high-DPI screens.sizesattribute to the hero image inhero.tsx. This helps the browser prioritize and properly size the image before the full layout is calculated.tsconfig.jsontarget toES2022and added a.browserslistrcfile (not dead). This allows the build process to target modern browsers more accurately, reducing the inclusion of unnecessary polyfills (likeArray.prototype.at,flat, etc.).src/components/sections/hero.tsxandsrc/components/section.tsxto readwindow.innerWidthonce withinuseEffectinstead of using multiple fallbacks or repeated property lookups, mitigating layout thrashing.PR created automatically by Jules for task 16001043489049676663 started by @amrabed